<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
	<div id="box">
		<select name="" id="sel1"></select>
		<select name="" id="sel2"></select>
		<select name="" id="sel3"></select>
	</div>
	
	<script>
		/*var sel1 = document.getElementsByTagName('select')[0];
		var sel2 = document.getElementsByTagName('select')[1];
		var sel3 = document.getElementsByTagName('select')[2];*/
		var s = [
			{id:1,name:'河南'},
			{id:2,name:'苏州'},
			{id:3,name:'济南'}
		]
		var c = [
			{id:4,name:'河南1',parent:1},
			{id:5,name:'河南2',parent:1},
			{id:6,name:'苏州1',parent:2},
			{id:7,name:'苏州2',parent:2},
			{id:8,name:'济南1',parent:3},
			{id:9,name:'济南2',parent:3}
		]
		var d = [
			{name:'河南11',parent:4},
			{name:'河南111',parent:4},
			{name:'河南22',parent:5},
			{name:'河南2222',parent:5},
			{name:'济南22',parent:9},
			{name:'济南2222',parent:9}
		]
		function Check(id){
			this.box = document.getElementById(id);
			this. sel1 = this.box.getElementsByTagName('select')[0];
			this. sel2 = this.box.getElementsByTagName('select')[1];
			this. sel2 = this.box.getElementsByTagName('select')[2];
		}
		Check.prototype.init = function(){
			var html = '<option value="请选择">请选择</option>';
			for(var i = 0 ;i<s.length;i++){
				html+='<option value="'+s[i].id+'">'+s[i].name+'</option>';
			}
			sel1.innerHTML = html;
			this.chack();
		}
		Check.prototype.chack = function(){
			sel1.onchange = function() {
				var html = '<option value="请选择">请选择市</option>';
				for(var i = 0 ;i<c.length;i++){
					if(this.value == c[i].parent){
						html+='<option value="'+c[i].id+'">'+c[i].name+'</option>';
					}
				}
				sel2.innerHTML = html;
				sel3.innerHTML = '<option value="请选择">请选择区</option>';
			}
			sel2.onchange = function() {
				var html = '<option value="请选择">请选择区</option>';
				for(var i = 0 ;i<d.length;i++){
					if(this.value == d[i].parent){
						html+='<option value="'+d[i].name+'">'+d[i].name+'</option>';
					}
				}
				console.log(html)
				sel3.innerHTML = html;
			}
		};
		var city = new Check('box');
		city.init();





		/*var html = '<option value="请选择">请选择</option>';
		for(var i = 0 ;i<s.length;i++){
			html+='<option value="'+s[i].id+'">'+s[i].name+'</option>';
		}
		sel1.innerHTML = html;
		sel1.onchange = function() {
			var html = '<option value="请选择">请选择</option>';
			for(var i = 0 ;i<c.length;i++){
				if(this.value == c[i].parent){
					html+='<option value="'+c[i].id+'">'+c[i].name+'</option>';
				}
			}
			sel2.innerHTML = html;
			sel3.innerHTML = '<option value="请选择">请选择</option>';
		}
		sel2.onchange = function() {
			var html = '<option value="请选择">请选择</option>';
			for(var i = 0 ;i<d.length;i++){
				if(this.value == d[i].parent){
					html+='<option value="'+d[i].name+'">'+d[i].name+'</option>';
				}
			}
			console.log(html)
			sel3.innerHTML = html;
		}*/
	</script>
</body>
</html>